让网页自动适配操作系统的暗色(夜间)模式 |
您所在的位置:网站首页 › edge 黑暗模式 › 让网页自动适配操作系统的暗色(夜间)模式 |
最近打开 https://docs.microsoft.com/,发现页面整体都是暗色主题,而印象中不久之前还都是白底黑字。 于是简单查了一下,发现目前的大部分主流浏览器(Chrome、Firefox、Edge..)已经开始支持通过使用 prefers-color-scheme CSS 媒体特性来检测用户是否将操作系统的主题色设置为亮色或者暗色。 使用这种方式,在更改操作系统主题(或更改Win10中的新Edge默认主题)时,页面样式实时生效,无需刷新。(Microsoft Docs 则需要刷新页面才可生效,使用的也许不是这种方式,此处不做深究)。 关键代码:通过CSS@media设置相应主题的样式,在受支持的浏览器和操作系统中将会根据环境选择相应的样式。 @media (prefers-color-scheme: dark) { body { background-color: #121212; color: #e3e3e3; } div { border-color: #353535; } } @media (prefers-color-scheme: light) { body { background-color: #F1F1F1; color: #333333; } div { border-color: #a1a1a1; } }语法:(摘自 developer.mozilla.org)no-preference 表示系统未得知用户在这方面的选项。在布尔值上下文中,其执行结果为 false。 light 表示用户已告知系统他们选择使用浅色主题的界面。 dark 表示用户已告知系统他们选择使用暗色主题的界面。 译者注:“未得知”、“已告知”等用语,英文原文如此。 “未得知”可理解为:浏览器的宿主系统不支持设置主题色,或者支持主题色并默认为/被设为了未设置/无偏好。 “已告知”为:浏览器的宿主系统支持设置主题色,且被设置为了亮色或者暗色。 目前,若结果为 no-preference,无法通过此媒体特性获知宿主系统是否支持设置主题色,或者用户是否主动将其设置为无偏好。出于隐私保护等方面的考虑,用户或用户代理也可能在一些情况下在浏览器内部将其设置为 no-preference。 浏览器兼容性:△ 截至2020年8月,developer.mozilla.org 中报告的兼容性说明 效果演示:在Chrome、Firefox中打开本页,切换Win10操作系统主题色;或在Edge中切换浏览器主题色查看效果。 本文由lenashane.com原创,转载请注明出处:查看原文 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |